<template>
<div>
    <AutoTable :columns="table.service_columns" :data="list" :page="page"></AutoTable>
    <ServiceAbutmentPage v-model="modal1" :id="id" @on-close="handleCloseModal"></ServiceAbutmentPage>
</div>
</template>
<script>
import Page from '@/common/model/Page'
import ServiceAbutmentPage from './ServiceAbutmentPage'
import Abutment from "@/common/model/Abutment"
import AutoTable from "@/common/components/AutoTable";
import AbutmentParent from "./abutment_parent";
export default {
    extends: AbutmentParent,
    props: {
        page: {
            type: Page
        }
    },
    components: {
        ServiceAbutmentPage, AutoTable
    },
    data() {
        return {
            modal1: false,
            id: 0,
            table: {
                service_columns: [                    
                    { title: '对接标题', render: (h, params) => {
                        var index = (this.page.current_page - 1) * this.page.page_size + params.index + 1;
                        return h('strong', index + "、" + params.row.title);
                    } },
                    { title: '对接单号', render: (h, params) => {
                        return h('div',  params.row.number);
                    } },
                    { title: '需求方', render: (h, params) => {
                        return h('div', [
                            h('strong', params.row.demand_name),
                            h('div', { style: { color: "#888" } }, [
                                h('Icon', {
                                    props: { type: 'person' }
                                }),
                                h('strong', params.row.demand_enterprise)
                            ])
                        ]);
                    }},
                    { title: '服务方', render: (h, params) => {
                        return h('div', [
                            h('strong', params.row.service_name),
                            h('div', { style: { color: "#888" } }, [
                                h('Icon', {
                                    props: { type: 'person' }
                                }),
                                h('strong', params.row.service_enterprise)
                            ])
                        ]);
                    }},
                    { title: '时间', width: 150,  align: 'center', render: (h, params) => { 
                        return h('strong', params.row.formated_create_time); 
                    }},
                    { title: '对接状态', width: 150,  align: 'center', render: (h, params) => { 
                        return h('strong', this.serviceStatusMessage(params.row)[0]); 
                    }},
                    { title: '操作', key: 'action', width: 75, align: 'center', render: (h, params) => {
                        return h('div', [
                            h('Badge', { 
                                props: { dot: true, count: params.row.step_abutment_data.status == 1 ? 1 : 0 }, 
                                style: { marginTop: "5px" } }, [
                                    h('Button', {
                                        props: { type: 'success', size: 'small' },
                                        on: { click: () => { this.id = params.row.id; this.modal1 = true; } }
                                    }, '查看')
                                ]
                            )
                        ]);
                    }}
                ]
            }
        };
    },
    computed: {
        list(){
            return Abutment.parseList(this.page.list);
        }
    },
    methods: {
        handleCloseModal() {
            this.page.getData();
        }
    }
}
</script>